<template>
  <el-drawer
    title="订单详情"
    :visible.sync="isShow"
    :wrapper-closable="!modalDialog"
    size="1000px"
  >
    <div class="dialog_wrap">
      <div class="property-title">订单信息</div>
      <div class="wrap">
        <div class="item">
          <span class="key">订单编号：</span>
          <span class="value">{{ detail.orderId }}</span>
        </div>
        <div class="item">
          <span class="key">订单状态：</span>
          <span>{{ detail.orderStatus }}</span>
        </div>
        <div class="item">
          <span class="key">创建时间：</span>
          <span class="value">{{ detail.orderTime }}</span>
        </div>
        <div v-if="detail.payTime" class="item">
          <span class="key">支付时间：</span>
          <span class="value">{{ detail.payTime }}</span>
        </div>
        <div class="item">
          <span class="key">订单来源：</span>
          <span class="value">{{ detail.fromType == '01' ? '小程序端' : '场馆端' }}</span>
        </div>
        <div class="item">
          <span class="key">订单金额：</span>
          <span class="value">{{ detail.orderPrice }}</span>
        </div>
        <div v-if="detail.payMethod" class="item">
          <span class="key">支付方式：</span>
          <span class="value">{{ detail.payMethod }}</span>
        </div>
        <div v-if="detail.mixedPayMethod" class="item">
          <span class="key">混合支付方式：</span>
          <span class="value">{{ detail.mixedPayMethod || '-' }}</span>
        </div>
        <div v-if="detail.mixedPayMoney" class="item">
          <span class="key">混合支付金额：</span>
          <span class="value">{{ detail.mixedPayMoney || '-' }}</span>
        </div>
        <div v-if="detail.cardPayMoney" class="item">
          <span class="key">混合支付会员卡金额：</span>
          <span class="value">{{ detail.cardPayMoney || '-' }}</span>
        </div>
        <div class="item">
          <span class="key">操作员：</span>
          <span class="value">{{ detail.createUser }}</span>
        </div>
        <div class="item">
          <span class="key">备注：</span>
          <span class="value">{{ detail.remake }}</span>
        </div>
      </div>
      <div class="line-style mb20" />
      <div class="property-title">开票情况</div>
      <div class="df_ac">
        <div>
          <span class="key">开票状态：</span>
          <span class="value">{{ detail.invoiceStatus || '~' }}</span>
        </div>
        <div>
          <span class="key">开票时间：</span>
          <span class="value">{{ detail.invoiceTime || "~" }}</span>
        </div>
      </div>
      <div class="line-style mb20" />
      <div class="property-title">会员信息</div>
      <div class="df_ac mt20">
        <div>
          <span class="key">姓名：</span>
          <span class="value">{{ detail.memberName || '' }}</span>
        </div>
        <div>
          <span class="key">联系电话：</span>
          <span class="value">{{ detail.memberPhone || '' }}</span>
        </div>
        <div v-if="detail.memberId">
          <span class="key">会员卡号：</span>
          <span class="value">{{ detail.memberId || '' }}</span>
        </div>
      </div>
      <div class="line-style mb20" />
      <div class="property-title">卡信息</div>
      <el-table
        :data="detail.orderDetailList"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column
          align="center"
          label="商品名称"
          prop="name"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="关联内容"
          prop="info"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="商品实付金额(元)"
          prop="price"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="手续费(元)"
          prop="serviceChargePrice"
          min-width="90"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="状态"
          prop="payStatus"
          min-width="90"
          show-overflow-tooltip
        />
      </el-table>
      <div v-if="detail.detailMoneyRespParam" class="bottom_wrap">
        <div v-if="detail.detailMoneyRespParam.orderPrice || detail.detailMoneyRespParam.orderPrice === 0" class="line">
          <span>订单金额：</span>
          <span>{{ detail.detailMoneyRespParam.orderPrice || 0 }}</span>
          <span>元</span>
        </div>
        <div v-if="detail.detailMoneyRespParam.getPrice || detail.detailMoneyRespParam.getPrice === 0" class="line secondColor">
          <span>实收款：</span>
          <span>{{ detail.detailMoneyRespParam.getPrice || 0 }}</span>
          <span>元</span>
        </div>
      </div>
    </div>

  </el-drawer>
</template>

<script>
import store from '@/store'
import { serviceOrderDetail } from '@/api'
export default {
  data() {
    return {
      isShow: false,
      detail: {},
      modalDialog: store.getters.dialog
    }
  },
  methods: {
    getOrderDetail(orderId) {
      serviceOrderDetail({ param: { orderId }}).then(res => {
        if (res.errorCode === '000000') {
          this.detail = { ...res.record }
          this.isShow = true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .dialog_wrap{
    .title{
      font-size: 16px;
      font-weight: 800;
      margin: 20px 0px;
    }
    .wrap{
      display: flex;
      flex-wrap: wrap;
      .item{
        width: 33.33%;
        margin-bottom: 10px;
      }
    }
  }
  .df_ac {
  flex-wrap: wrap;
  div {
    width: 33.33%;
    margin-bottom: 20px;
    .key {
  color: #666666;
  display: inline-block;
  // width: 90px;
  // text-align: right;
}
.value {
  color: #222;
}
  }
}
.bottom_wrap {
  margin-top: 20px;
  text-align: right;
  .line {
    margin-bottom: 10px;
  }
}
</style>
